<template>
  <div class="page">
    <data-box ref="databox" :params="params" :defaultParams="defaultParams" @resetForm="resetPhone" :server="server.search" row-key="cupoId" showExpend>
      <!--输入区域-->
      <template slot="mustShowInput">
        <el-form-item label="客户姓名" v-role="0x020205" prop="custName">
          <el-input v-model="params.custName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="cupoPhone" :rules="[validate.truePhoneRules()]" v-role="0x020213">
          <el-input v-model="params.cupoPhoneX" @change="PhoneFormat" :maxlength="13"></el-input>
        </el-form-item>
      </template>
      <template slot="input">
        <el-form-item label="机构" prop="deptCode" v-role="0x020217">
          <el-cascader v-model="params.deptCodes" :options="orgNameList" @change="getcupoName" :props="{value:'deptCode',label:'name'}" change-on-select :show-all-levels="false" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="催收员" v-role="0x020211" prop="cupoName">
          <el-input v-model="params.cupoName" v-if="params.deptCode===''"></el-input>
          <el-select v-model="params.cupoName" placeholder="请选择" clearable v-else>
            <el-option v-for="{userId,realName} in orgCuponameList" :key="userId" :label="realName" :value="realName">
            </el-option>
          </el-select>
        </el-form-item>
        <div class="inline-box">
          <el-form-item label="案件金额" v-role="0x020206" prop="cupoAmtMin" :rules="[
            { validator: validate.validateMin(params.cupoAmtMax), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.cupoAmtMin" type="number" :min="0"></el-input>
          </el-form-item>
          <el-form-item label="-" prop="cupoAmtMax" v-role="0x020206" :rules="[
            { validator: validate.validateMax(params.cupoAmtMin), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.cupoAmtMax" type="number" :min="0"></el-input>
          </el-form-item>
        </div>
        <!--<el-form-item label="还款状态" v-role="0x020207">
          <el-select v-model="params.cupoPaystatus" placeholder="请选择" clearable>
            <el-option v-for="{id,name} in this.$helper.getTypeCode('0033')" :key="id" :label="name" :value="name">
            </el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="批次号" prop="cupoBatch" v-role="0x020209">
          <el-input v-model="params.cupoBatch"></el-input>
        </el-form-item>
        <div class="inline-box">
          <el-form-item label="逾期天数" v-role="0x020208" prop="overDayMin" :rules="[
            { validator: validate.validateMin(params.overDayMax), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.overDayMin" type="number" :min="0"></el-input>
          </el-form-item>
          <el-form-item label="-" v-role="0x020208" prop="overDayMax" :rules="[
            { validator: validate.validateMax(params.overDayMin), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.overDayMax" type="number" :min="0"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="状态" v-role="0x020212" prop="cupoStatus">
          <el-select v-model="params.cupoStatus" placeholder="请选择" clearable>
            <el-option v-for="{id,name} in this.$helper.getTypeCode('0018')" :key="id" :label="name" :value="id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="委托方" v-role="0x020210" prop="prinId">
          <el-select v-model="params.prinId" placeholder="请选择" clearable>
            <el-option v-for="{index,prinId,prinName} in this.dataName" :key="index" :label="prinName" :value="prinId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="归属省份" v-role="0x020214" prop="cupoPrid">
          <el-select v-model="params.cupoPrid" clearable>
            <el-option v-for="{id,areaName} in provinceList" :key="id" :label="areaName" :value="id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="归属城市" v-role="0x020215" prop="prinCityid">
          <el-select v-model="params.prinCityid" clearable>
            <el-option v-for="{id,areaName} in cityList" :key="id" :label="areaName" :value="id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证" prop="cupoIdcard" v-role="0x020216" :rules="[
      { message: '请输入正确的身份证号', trigger: 'blur', pattern:/(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$)|(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)/}]">
          <el-input v-model="params.cupoIdcard"></el-input>
        </el-form-item>
      </template>
      <template slot="button">
        <!--按钮区域-->
        <el-button @click="batchClick" v-role="0x020201">批量分配</el-button>
      </template>
      <template slot="column">
        <!--数据列区域-->
        <el-table-column type="selection" width="30"></el-table-column>
        <el-table-column type="index" label="序号" width="30">
        </el-table-column>
        <el-table-column prop="cupoCasenum" label="案件编号" min-width="100" sortable>
          <template scope="scope">
            <router-link :to="{ path: `/acc-center/visit-case/${scope.row.cupoId}/${scope.row.cupoCasenum}/${scope.row.custId}`}">{{scope.row.cupoCasenum}}</router-link>
            <!--<el-button @click="caseNumClick(scope)" type="text" size="small">{{scope.row.cupoCasenum}}</el-button>-->
          </template>
        </el-table-column>
        <el-table-column prop="custName" label="客户姓名" min-width="60">
        </el-table-column>
        <el-table-column prop="cupoPhone" label="手机号" min-width="80">
          <template scope="scope">
            <span>{{scope.row.cupoPhone | encryptPhone}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cupoIdcard" label="身份证" min-width="80">
          <template scope="scope">
            <span>{{ scope.row.cupoIdcard | encryptIDCard }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cupoAmt" label="案件金额(元)" min-width="95" sortable>
        </el-table-column>
        <!--<el-table-column prop="cupoPaystatus" label="还款状态" min-width="60">
        </el-table-column>-->
        <el-table-column prop="cupoOverday" label="逾期天数" min-width="70" sortable>
        </el-table-column>
        <el-table-column prop="cupoBatch" label="批次号" min-width="90" sortable>
        </el-table-column>
        <el-table-column prop="cupoPrincipal" label="委托方" min-width="80">
        </el-table-column>
        <el-table-column prop="cupoCity" label="归属城市" min-width="60">
        </el-table-column>
        <el-table-column prop="cupoName" label="催收员" min-width="60">
        </el-table-column>
        <el-table-column prop="cupoStatus" label="状态" min-width="90">
          <template scope="scope">
            <el-popover trigger="hover" placement="bottom" v-if="scope.row.cupoStatus===57">
              <p class="text-left">还款金额: {{ getRepayNum(scope) }}元</p>
              <p class="text-left">还款日期: {{ getRepayDate(scope) }}</p>
              <div slot="reference" class="name-wrapper">
                <el-button type="text" style="color:green">{{scope.row.cupoStatus | typeCodeConvert('0018')}}</el-button>
              </div>
            </el-popover>
            <span v-else>{{scope.row.cupoStatus | typeCodeConvert('0018')}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cupoFtime" sortable label="跟进时间" min-width="120" sortable>
        </el-table-column>
        <el-table-column prop="cupoGettime" label="案件流入日期" min-width="100" sortable>
        </el-table-column>
        <el-table-column label="操作" min-width="100">
          <template scope="scope">
            <el-button @click="hangClick(scope)" type="text" size="small" v-if="scope.row.cupoPause === 109" v-role="0x020202">挂起</el-button>
            <el-button @click="unhangClick(scope)" type="text" size="small" v-else v-role="0x020204">取消挂起</el-button>
            <el-button @click="redistributeClick(scope)" type="text" size="small" v-role="0x020203">重新分配</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>

    <!--批量分配-->

    <el-dialog title="批量分配" v-model="dialog.disabled" size="small" @open="loadData">
      <MassDistribution @close="dialog.disabled=false" @refesh="refresh" ref="refresh" :multipleSelection="multipleSelection"></MassDistribution>
    </el-dialog>

    <!--重新分配-->

    <el-dialog title="选择催收专员" @open="loadCase" v-model="redialog.disabled" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <AgainDistribution @close="redialog.disabled=false" ref="loadnum" :cupodata="cupodata"></AgainDistribution>
    </el-dialog>
  </div>
</template>
<script>
  import DataBox from '@/components/DataBox'
  import net from '@/util/net'
  import servers from '@/config/servers'
  import { getCityJson, validateMin, validateMax, truePhoneRules, mobileFormatting, toThousands } from '@/util/common'
  import { mapState, mapActions } from 'vuex'
  // 批量分配
  import MassDistribution from '@/views/call-acc/MassDistribution'
  // 重新分配
  import AgainDistribution from '@/views/call-acc/AgainDistribution'

  export default {
    name: 'visit-case',
    data() {
      return {
        // 定义服务接口
        server: {
          search: servers.VisitAcc.post_outVisit_query,
          redistribution: servers.VisitAcc.post_redistribution,
          hangup: servers.VisitAcc.post_hangup
        },
        // 定义请求参数
        params: {
          custName: '',
          cupoAmtMin: '',
          cupoAmtMax: '',
          overDayMin: '',
          overDayMax: '',
          cupoBatch: '',
          prinId: '',
          cupoName: '',
          cupoStatus: '',
          // cupoPaystatus: '',
          cupoPhone: '',
          cupoPhoneX: '',
          cupoCity: '',
          cupoPrid: '',
          prinCityid: '',
          cupoIdcard: '',
          deptCode: '',
          deptCodes: []
        },
        orgNameList: [],
        orgCuponameList: [],
        defaultParams: {
          cupoRectype: '70',
          sort: 'cupoOverday,asc'
        },
        validate: {
          validateMin,
          validateMax,
          truePhoneRules
        },
        multipleSelection: [],
        todayPer: 0,
        cupodata: '',
        numAmountObj: {},
        cupor: [],
        dialog: {
          disabled: false
        },
        provinceList: getCityJson({ level: 1 }), // 省份列表
        redialog: {
          disabled: false
        },
        batchArr: {},
        dataName: [],
        allocated: 0,
        // 承诺还款
        repayArr: []
      }
    },
    computed: {
      ...mapState({
        update: state => state.visitAcc.update_time,
        deptInfo: state => state.callAcc.dept_info
      }),
      /**
       * 获取2级城市列表
       */
      cityList() {
        return this.params.cupoPrid ? getCityJson({ level: 1, parentId: this.params.cupoPrid }) : []
      }
    },
    watch: {
      update() {
        this.getRepayData()
        // this.$refs['databox'].refresh()
      },
      deptInfo() {
        this.getOrgNameList()
      }
    },
    activated() {
      this.$refs['databox'].handleQuery()
    },
    methods: {
      // 添加Actions
      ...mapActions([
        'updateDepartmentNameInfo'
      ]),
      /**
       * 获取组织名称列表
       */
      getOrgNameList() {
        let data = this.deptInfo.map(v => Object.assign({}, v))
        let fun = (id) => {
          // 递归对象子元素
          let list = data.filter(x => x.pid === id).map(node => {
            // 递归构建子节点
            let children = fun(node.deptId)
            if (children && children.length) {
              node.children = children
            }
            return node
          })
          return list
        }
        // 生成数据树
        this.orgNameList = fun(this.$store.state.user.departments[0].deptId)
      },
      /**
       * 根据部门获取催收员
       */
      getcupoName() {
        this.params.cupoName = ''
        if (this.params.deptCodes.length > 0) {
          this.params.deptCode = this.params.deptCodes[this.params.deptCodes.length - 1]
          net.send({
            server: servers.CallAcc.get_user_controller,
            data: {
              deptCode: this.params.deptCode
            }
          }).then((data) => {
            this.orgCuponameList = data
          }, err => {
            this.$message({
              type: 'info',
              message: err.reason
            })
          })
        } else {
          this.params.deptCode = ''
        }
      },
      /**
       * 手机号重置
       */
      resetPhone() {
        this.params.cupoPhoneX = ''
        this.params.deptCodes = []
      },
      /**
       * 手机号格式设置(xxx-xxxx-xxxx)
       */
      PhoneFormat() {
        this.params.cupoPhoneX = mobileFormatting(this.params.cupoPhoneX.replace(/-/g, ''))
        // 取消'-'格式
        this.params.cupoPhone = this.params.cupoPhoneX.replace(/-/g, '')
      },
      /**
       * 案件编号点击事件
       */
      // caseNumClick(scope) {
      //   if (scope.row.cupoStatus === 55) {
      //     // 获取催收状态（催收中）
      //     net.send({
      //       server: servers.CallAcc.get_collection_status,
      //       data: {
      //         id: scope.row.cupoId
      //       }
      //       // cupoRectype: '69'
      //     }).then((data) => {
      //       // this.repayArr = data
      //     }, err => {
      //       this.$message({
      //         type: 'info',
      //         message: err.reason
      //       })
      //     })
      //   }
      //   // 路由跳转
      //   this.$router.push(`/acc-center/visit-case/${scope.row.cupoId}/${scope.row.cupoCasenum}/${scope.row.custId}`)
      // },
      /**
       * 获取催收专员案件数(批量分配)
       */
      loadData() {
        this.$nextTick(() => {
          this.$refs['refresh'].load()
        })
      },
      /**
       * 获取催收专员案件数(重新分配)
       */
      loadCase() {
        this.$nextTick(() => {
          this.$refs['loadnum'].loadCaseNum()
        })
      },
      /**
       * 刷新databox
       */
      refresh() {
        this.$refs['databox'].refresh()
      },
      /**
       * 获取承诺还款数据
       */
      getRepayData() {
        net.send({
          server: servers.CaseManage.get_acc_recevice_pool_by_token,
          cupoRectype: '70'
        }).then((data) => {
          this.repayArr = data
        }, err => {
          this.$message({
            type: 'info',
            message: err.reason
          })
        })
      },
      /**
       * 获取承诺还款的金额
       */
      getRepayNum(scope) {
        let item = this.repayArr.find(x => x.cupoId === scope.row.cupoId)
        if (item) {
          return toThousands(item.promiseAmt.toFixed(2))
        }
      },
      /**
       * 获取承诺还款的日期
       */
      getRepayDate(scope) {
        let item = this.repayArr.find(x => x.cupoId === scope.row.cupoId)
        if (item) {
          return item.promiseDate
        }
      },
      tableCheck(row, i) {
        console.log(row)
        return false
      },
      /**
       * 批量分配
       */
      batchClick() {
        this.multipleSelection = this.$refs['databox'].getCurrentSelection()
        if (this.multipleSelection.length === 0) {
          this.$alert('请选择要分配的案件', '提示', {
            confirmButtonText: '确定'
          })
        } else {
          this.dialog.disabled = true
        }
      },
      /**
       * 挂起
       */
      hangClick(scope) {
        this.$confirm('该客户被挂起后，就一直停留在此逾期阶段。您确定要挂起吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          net.send({
            server: this.server.hangup,
            data: {
              cupoId: scope.row.cupoId,
              cupoPause: 1
            }
          }).then(() => {
            // 更新数据信息
            this.$message({
              type: 'success',
              message: '案件挂起成功!'
            })
            this.$refs['databox'].refresh()
          }, err => {
            this.$message({
              type: 'info',
              message: err.reason
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      },
      /**
       * 取消挂起
       */
      unhangClick(scope) {
        this.$confirm('您确定要取消挂起吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          net.send({
            server: this.server.hangup,
            data: {
              cupoId: scope.row.cupoId,
              cupoPause: 2
            }
          }).then(() => {
            // 更新数据信息
            this.$message({
              type: 'success',
              message: '案件取消挂起成功!'
            })
            this.$refs['databox'].refresh()
          }, err => {
            this.$message({
              type: 'info',
              message: err.reason
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      },
      /**
       * 重新分配
       */
      redistributeClick(scope) {
        this.cupodata = scope.row
        this.redialog.disabled = true
      }
    },
    mounted() {
      this.updateDepartmentNameInfo()
      this.getRepayData()
      net.send({
        server: servers.ApprovalManage.get_all_pricipal,
        data: this.$route.path
      }).then((data) => {
        // 接口返回的数据
        this.dataName = data
      }, err => {
        this.$message({
          type: 'info',
          message: err.reason
        })
      })
    },
    components: {
      DataBox,
      MassDistribution,
      AgainDistribution
    }
  }

</script>
<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
  .header {
    margin: 10px 0;
    font-size: 0.875rem;
    color: rgb(31, 45, 61);
    text-align: left;
  }
  
  .dialog-footer {
    padding: 20px;
  }
  
  .inline-box {
    display: inline-block;
    vertical-align: top;
  }

</style>
